<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Layout management in Ruby Qt</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, layout management, Qt, Ruby, programming, Linux">
<meta name="description" content="In this part of the Ruby Qt tutorial, we will
cover the layout management.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Layout management</h1>

<p>
In this part of the Ruby Qt programming tutorial, we will introduce layout managers. 
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<p>
When we design the GUI of our application, we decide what 
components we will use and how we will organize those components
in the application. To organize our components, we use specialized
non visible objects called layout managers. There are several options in Qt.
We can use absolute positioning, built-in layout managers or create a custom layout
manager. We can also visually build the layouts using the Qt Designer. 
</p>

<p>
Qt has some important built-in layout managers. The <code>Qt::VBoxLayout</code> 
class lines up widgets vertically. <code>Qt::HBoxLayout</code> lines up widgets horizontally.
The <code>Qt::GridLayout</code> class lays out widgets in a grid. The grid layout is the most
flexible layout manager. The box layouts can be nested into one another to create complex layouts. 
</p>


<h2>Absolute positioning</h2>

<p>
In most cases, programmers should use layout managers. There are a few 
situations, where we can use absolute positioning. In absolute positioning, 
the programmer specifies the position and the size of each widget in pixels. 
The size and the position of a widget do not change, if you resize a window.
Applications look different on various platforms, and what looks OK on Linux, 
might not look OK on Mac. Changing fonts in your application might spoil the 
layout. If you translate your application into another language, you must redo 
your layout. For all these issues, use the absolute positioning only when you
have a reason to do so.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, we lay out widgets
# using absolute positioning.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012


require 'Qt'


class QtApp &lt; Qt::Widget

    def initialize
        super
        
        setWindowTitle "Absolute"
        
        init_ui
        
        resize 300, 280
        move 300, 300

        show
    end
    
    def init_ui
    
        setStyleSheet "QWidget { background-color: #414141 }"

        bardejov = Qt::Pixmap.new "bardejov.jpg"
        rotunda = Qt::Pixmap.new "rotunda.jpg"
        mincol = Qt::Pixmap.new "mincol.jpg"

        barLabel = Qt::Label.new self
        barLabel.setPixmap bardejov
        barLabel.move 20, 20

        rotLabel = Qt::Label.new self
        rotLabel.setPixmap rotunda
        rotLabel.move 40, 160

        minLabel = Qt::Label.new self
        minLabel.setPixmap mincol
        minLabel.move 170, 50
    
    end
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
In this example, we show three images using the absolute positioning.
</p>

<pre class="explanation">
barLabel = Qt::Label.new self
barLabel.setPixmap bardejov
</pre>

<p>
The <code>Qt::Label</code> widget is used to hold the image. 
</p>

<pre class="explanation">
barLabel.move 20, 20
</pre>

<p>
We use the <code>move</code> method to position the label on the
window at x=20, y=20. 
</p>

<p>
When we resize the window, the labels retain their initial size. 
</p>


<img src="/img/gui/qtruby/absolute.png" alt="Absolute">
<div class="figure">Figure: Absolute positioning</div>


<h2>Buttons example</h2>

<p>
In the following example, we will position two buttons in the bottom right corner
of the window. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, we use box layouts
# to position two buttons in the
# bottom right corner of the window.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp &lt; Qt::Widget

    def initialize
        super
        
        setWindowTitle "Buttons"
        
        init_ui
        
        resize 330, 170
        move 300, 300

        show
    end
    
    def init_ui
        vbox = Qt::VBoxLayout.new self
        hbox = Qt::HBoxLayout.new

        ok = Qt::PushButton.new "OK", self
        apply = Qt::PushButton.new "Apply", self

        hbox.addWidget ok, 1, Qt::AlignRight
        hbox.addWidget apply

        vbox.addStretch 1
        vbox.addLayout hbox
    end
    
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
We use nested box layouts to get our intended layout. 
</p>

<pre class="explanation">
vbox = Qt::VBoxLayout.new self
hbox = Qt::HBoxLayout.new
</pre>

<p>
We use one vertical and one horizontal box. 
</p>

<pre class="explanation">
ok = Qt::PushButton.new "OK", self
apply = Qt::PushButton.new "Apply", self
</pre>

<p>
These are the two buttons that will go into the bottom
right corner of the window. 
</p>

<pre class="explanation">
hbox.addWidget ok, 1, Qt::AlignRight
</pre>

<p>
We put the ok button into the horizontal box. The second parameter
is the <code>stretch</code> factor. It expands the area allotted to the
ok button. It takes all available space left. The alignment of the windget
inside this area is controlled by the third parameter. The <code>Qt::AlignRight</code>
will align the button to the right. 
</p>

<pre class="explanation">
vbox.addStretch 1
</pre>

<p>
This line creates a vertically expanded white space, which will push the horizontal
box with the buttons to the bottom. 
</p>

<pre class="explanation">
vbox.addLayout hbox
</pre>

<p>
The horizontal box is nested into the vertical box. 
</p>

<img src="/img/gui/qtruby/buttons.png" alt="Buttons example">
<div class="figure">Figure: Buttons example</div>



<h2>Windows example</h2>

<p>
The following is a more complicated example with nested box layouts.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, use box layouts
# to create a Windows example
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp &lt; Qt::Widget

    def initialize
        super
        
        setWindowTitle "Windows"
        
        init_ui
        
        resize 350, 300
        move 300, 300

        show
    end
    
    def init_ui
        vbox = Qt::VBoxLayout.new self

        vbox1 = Qt::VBoxLayout.new
        hbox1 = Qt::HBoxLayout.new
        hbox2 = Qt::HBoxLayout.new

        windLabel = Qt::Label.new "Windows", self
        edit = Qt::TextEdit.new self
        edit.setEnabled false

        activate = Qt::PushButton.new "Activate", self
        close = Qt::PushButton.new "Close", self
        help = Qt::PushButton.new "Help", self
        ok = Qt::PushButton.new "OK", self

        vbox.addWidget windLabel

        vbox1.addWidget activate
        vbox1.addWidget close, 0, Qt::AlignTop
        hbox1.addWidget edit
        hbox1.addLayout vbox1

        vbox.addLayout hbox1

        hbox2.addWidget help
        hbox2.addStretch 1
        hbox2.addWidget ok
        
        vbox.addLayout hbox2, 1
        setLayout vbox

    end    
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
In this layout, we use two vertical and horizontal boxes. 
</p>

<pre class="explanation">
box = Qt::VBoxLayout.new self
</pre>

<p>
This is the base layout of the example. 
</p>

<pre class="explanation">
windLabel = Qt::Label.new "Windows", self
</pre>

<p>
First goes the label widget. It goes simply to the top of the
vertical box. 
</p>

<pre class="explanation">
vbox1.addWidget activate
vbox1.addWidget close, 0, Qt::AlignTop
hbox1.addWidget edit
hbox1.addLayout vbox1

vbox.addLayout hbox1
</pre>

<p>
In the center part of the window we have a text edit widget and
two vertically lined up buttons. The buttons go into a vertical box. The
buttons are aligned to the top within this vertical box. The vertical box
and the text edit go into a horizontal box. This horizontal box goes to the base
vertical box, just below the label widget. 
</p>

<pre class="explanation">
hbox2.addWidget help
hbox2.addStretch 1
hbox2.addWidget ok

vbox.addLayout hbox2, 1
</pre>

<p>
The help and the ok button go into another horizontal box. There is 
an expanded white space between these two buttons. Again, the horizontal box
goes to the base vertical box. 
</p>

<pre class="explanation">
setLayout vbox
</pre>

<p>
The base vertical box is set to be the main layout of the window. 
</p>

<img src="/img/gui/qtruby/windows.png" alt="Windows example">
<div class="figure">Figure: Windows example</div>


<h2>New Folder example</h2>

<p>
In the last example, we use the <code>Qt::GridLayout</code> manager to 
create a New Folder layout example.  
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, use the GridLayout
# to create a New Folder example.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp &lt; Qt::Widget

    def initialize
        super
        
        setWindowTitle "New Folder"
        
        init_ui
        
        resize 300, 300
        move 300, 300

        show
    end
    
    def init_ui
    
        grid = Qt::GridLayout.new self

        nameLabel = Qt::Label.new "Name", self
        nameEdit = Qt::LineEdit.new self
        text = Qt::TextEdit.new self
        okButton = Qt::PushButton.new "OK", self
        closeButton = Qt::PushButton.new "Close", self

        grid.addWidget nameLabel, 0, 0
        grid.addWidget nameEdit, 0, 1, 1, 3
        grid.addWidget text, 1, 0, 2, 4
        grid.setColumnStretch 1, 1
        grid.addWidget okButton, 4, 2
        grid.addWidget closeButton, 4, 3

    end    
end

app = Qt::Application.new(ARGV)
QtApp.new
app.exec
</pre>

<p>
In our example, we have one label, one line edit, one text edit and two buttons. 
</p>

<pre class="explanation">
grid = Qt::GridLayout.new self
</pre>

<p>
We create an instance of the <code>Qt::GridLayout</code> manager. 
</p>

<pre class="explanation">
grid.addWidget nameLabel, 0, 0
</pre>

<p>
We place the label widget in the first cell of the grid. The cells count from 0. 
The last two parameters are the row and column number. 
</p>

<pre class="explanation">
grid.addWidget nameEdit, 0, 1, 1, 3
</pre>

<p>
The line edit widget is placed at the first row, second column. 
The last two parameters are the row span and the column span. Horizontally, the
widget will span three columns. 
</p>

<pre class="explanation">
grid.setColumnStretch 1, 1
</pre>

<p>
The parameters of the method are the column number and the stretch factor.
Here we set stretch factor 1 to the second column. This means, that this column will take
all remaining space. This was set, because we wanted our buttons to retain their initial size. 
</p>


<img src="/img/gui/qtruby/newfolder.png" alt="New Folder example">
<div class="figure">Figure: New Folder example</div>


<p>
In this part of the Ruby Qt tutorial, we mentioned layout management of widgets. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 27, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>


